<template>
  <div class="shop_home">
    <!-- 导航条 -->
    <van-nav-bar title="商城首页" left-text="返回" left-arrow @click-left="onClickLeft" />
    <!-- ./ 导航条 end here -->
   
    <!-- 搜索 -->
    <van-search v-model="valuesearch" placeholder="请输入搜索关键词" />

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" lazy-render class="my_swipe">
      <van-swipe-item v-for="thumb in banners.thumb" :key="imathumbge">
        <img :src="thumb" />
      </van-swipe-item>
    </van-swipe>

    <!-- 通知 -->
    <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
    <!-- ./ 通知 end here -->
 
    <!-- 九宫格 -->
    <van-grid :border="false" clickable>
      <van-grid-item icon="play-circle-o" text="观看直播" icon-color="var(--van-red)" badge="2" />
      <van-grid-item icon="friends-o" text="拼团活动" icon-color="var(--van-blue)" />
      <van-grid-item icon="cash-o" text="砍价活动" icon-color="var(--van-orange)" />
      <van-grid-item icon="clock-o" text="秒杀活动" icon-color="var(--van-orange-dark)" />
      <van-grid-item icon="coupon-o" text="领卷优惠" icon-color="var(--van-red)" />
      <van-grid-item icon="comment-o" text="实时咨询" icon-color="var(--van-green)" />
      <van-grid-item icon="like-o" text="我的收藏" icon-color="var(--van-blue)" dot />
      <van-grid-item icon="guide-o" text="我的地址" icon-color="var(--van-orange)" />
    </van-grid>


    <!-- Tabbar 标签栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item icon="wap-home-o" name="shop-home" replace to="shop-home">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o" name="shop-class" replace to="shop-class">分类</van-tabbar-item>
      <van-tabbar-item icon="cart-o" name="shop-buys" replace to="shop-buys">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-o" name="shop-ours" replace to="shop-ours">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>


<script>
import { ref } from 'vue';
export default {
  setup() {
    const onClickLeft = () => history.back();
    const valuesearch = ref('');
    const active = ref('shop-home');
    return {
      onClickLeft,
      valuesearch,
      active,
    };
  },
  data() {
    return {
      banners: {
        // 轮播图
        thumb: [
          require('../../assets/img/apple-1.jpg'),
          require('../../assets/img/apple-2.jpg'),
          require('../../assets/img/apple-3.jpg'),
          require('../../assets/img/apple-4.jpg'),
        ],
      },
    };
  },


};

</script>

<style>
/* 导航栏 */
.shop_home .van-nav-bar .van-icon {
  color: var(--van-nav-bar-icon-color);
}
/* ./ 导航栏 end here */

/* 轮播图 */
.my_swipe img {
  width: 100%;
  display: block;
}
/* ./ 轮播图 end here */

</style>